<template>
  <div>
    <!-- 没有子级 -->
    <a-menu-item :key="item.key" v-if="!item.children">
      <template #icon>
        <SettingOutlined />
      </template>
      <router-link  :to="item.path"> {{ item.title }}</router-link>
    </a-menu-item>
    <!-- 有子级 -->
    <a-sub-menu :key="item.key" v-else>
      <template #icon>
        <AppstoreOutlined />
      </template>
      <template #title>{{ item.title }}</template>
      <sideItem v-for="child in item.children" :key="child.key" :item="child" />
    </a-sub-menu>
  </div>
</template>
<script>
import { reactive, toRefs, ref } from "vue"
import { AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
export default {
  name: "sideItem",
  props: ['item'],
  components: {
    AppstoreOutlined, SettingOutlined
  },
  setup () {
    const data = reactive({

    })
    const refData = toRefs(data)
    return {
      ...refData
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
